<template>
  <div class="roles">
    <el-row :gutter="20" type="flex" justify="space-between">
      <el-col :span="4">
        <el-card>
          <h4>一级分类</h4>
          <el-input
            placeholder="搜索名称"
            prefix-icon="el-icon-search"
            v-model="searchName"
          >
          </el-input>
          <el-tree
            class="filter-tree"
            :data="treeData"
            :prop="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
          <div class="add">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="$router.push({ name: 'addRole' })"
              >新增角色</el-button
            >
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card>
          <div slot="header" class="card-title">
            <h4>一级计划员</h4>
            <div>
              <el-button type="primary">保存修改</el-button>
              <el-button type="primary">停用</el-button>
            </div>
          </div>
          <el-tabs v-model="activeMenu">
            <el-tab-pane label="功能权限" name="1">
              <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                border
                style="width: 100%; margin-top: 20px"
                v-if="activeMenu == 1"
              >
                <el-table-column prop="firstMenu" label="一级菜单" width="180">
                  <template slot-scope="scope">
                    <el-checkbox
                      :indeterminate="scope.row.firstIsIndeterminate"
                      v-model="scope.row.firstMenu"
                      @change="
                        (val) => firstHandleCheckAllChange(val, scope.row)
                      "
                      >{{ scope.row.firstMenuLabel }}</el-checkbox
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="secondMenu" label="二级菜单">
                  <template slot-scope="scope">
                    <el-checkbox
                      :indeterminate="scope.row.secondIsIndeterminate"
                      v-model="scope.row.secondMenu"
                      @change="
                        (val) => secondHandleCheckAllChange(val, scope.row)
                      "
                      >{{ scope.row.secondMenuLabel }}</el-checkbox
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="authorityNode"
                  label="权限节点"
                  min-width="260"
                >
                  <template slot-scope="scope">
                    <el-checkbox-group
                      v-model="scope.row.authorityNode"
                      @change="
                        (val) => authorityHandleCheckAllChange(val, scope.row)
                      "
                    >
                      <el-checkbox
                        v-for="(item, index) in scope.row.authorityNodeLabel"
                        :key="index"
                        :label="item"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="角色成员" name="2">
              <my-table
                :columns="columns"
                :data="data"
                :showSelection="true"
                @selectChange="selectChange"
                v-if="activeMenu == 2"
              >
                <template v-slot:action="{ row }">
                  <el-button type="text" :class="row.status ? '' : 'danger'">{{
                    row.status ? "启用" : "停用"
                  }}</el-button>
                </template>
              </my-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import myTable from "@/components/table/myTable.vue";
export default {
  components: { myTable },
  data() {
    return {
      searchName: "",
      treeData: [
        {
          id: 1,
          label: "一级 1",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      activeMenu: "1",
      tableData: [
        {
          type: 1,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排订单管理",
          secondMenu: false,
          secondMenuLabel: "预排产订单层级",
          authorityNodeLabel: [
            "新建订单",
            "编辑订单",
            "删除订单",
            "订单详情",
            "导出报表",
            "溢出提醒",
            "产能占用申请",
            "冲销记录",
            "外协",
          ],
          authorityNode: [],
        },
        {
          type: 1,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排订单管理",
          secondMenu: false,
          secondMenuLabel: "预排产地区层级",
          authorityNodeLabel: [
            "订单详情",
            "导出报表",
            "溢出提醒",
            "数量返还",
            "冲销记录",
          ],
          authorityNode: [],
        },
        {
          type: 1,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排订单管理",
          secondMenu: false,
          secondMenuLabel: "预排产工厂层级",
          authorityNodeLabel: ["订单详情", "导出报表", "数量返还", "冲销记录"],
          authorityNode: [],
        },
        {
          type: 2,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排生产计划",
          secondMenu: false,
          secondMenuLabel: "一级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "外协",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 2,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排生产计划",
          secondMenu: false,
          secondMenuLabel: "二级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 2,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排生产计划",
          secondMenu: false,
          secondMenuLabel: "三级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 3,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP实际订单管理",
          secondMenu: false,
          secondMenuLabel: "ERP实际订单订单层级",
          authorityNodeLabel: [
            "关联虚拟订单",
            "查看虚拟订单",
            "订单详情",
            "导出报表",
            "溢出提醒",
            "外协",
          ],
          authorityNode: [],
        },
        {
          type: 3,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP实际订单管理",
          secondMenu: false,
          secondMenuLabel: "ERP实际订单地区层级",
          authorityNodeLabel: [
            "查看虚拟订单",
            "溢出提醒",
            "数量返还",
            "订单详情",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 3,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP实际订单管理",
          secondMenu: false,
          secondMenuLabel: "ERP实际订单工厂层级",
          authorityNodeLabel: [
            "查看虚拟订单",
            "产能占用申请",
            "数量返还",
            "订单详情",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 4,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,

          firstMenu: false,
          firstMenuLabel: "ERP预排生产计划",
          secondMenu: false,
          secondMenuLabel: "一级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "外协",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 4,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP预排生产计划",
          secondMenu: false,
          secondMenuLabel: "二级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 4,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP预排生产计划",
          secondMenu: false,
          secondMenuLabel: "三级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
      ],
      columns: [
        {
          label: "员工",
          prop: "name",
        },
        {
          label: "添加时间",
          prop: "addTime",
        },
        {
          label: "所属部门",
          prop: "department",
        },
        {
          label: "所属工厂",
          prop: "factory",
        },
        {
          label: "操作",
          prop: "action",
          slot: "action",
        },
      ],
      data: [],
      selectChangeList: [],
    };
  },
  created() {},
  mounted() {},
  watch: {
    searchName(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    selectChange(val) {
      this.selectChangeList = val;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 一级菜单
    firstHandleCheckAllChange(val, row) {
      console.log(val);
      this.tableData.forEach((i) => {
        if (i.type == row.type) {
          i.secondMenu = val;
          i.firstIsIndeterminate = false;
          i.secondIsIndeterminate = false;
          i.authorityNode = val ? i.authorityNodeLabel : [];
        }
      });
    },
    // 二级
    secondHandleCheckAllChange(val, row) {
      row.secondIsIndeterminate = false;
      row.authorityNode = val ? row.authorityNodeLabel : [];
      row.firstMenu = val;
      const typeRows = this.tableData.filter((i) => i.type === row.type);
      // 使用 some 方法判断是否存在 secondMenu 为 false 的情况
      const allSecondMenuTrue = !typeRows.some((i) => !i.secondMenu);
      console.log(allSecondMenuTrue);
      this.tableData.forEach((i) => {
        if (i.type === row.type) {
          if (allSecondMenuTrue) {
            i.firstMenu = true;
            i.firstIsIndeterminate = false;
          } else {
            if (!i.secondMenu) {
              i.firstIsIndeterminate = false;
            } else {
              i.firstIsIndeterminate = true;
            }
            i.firstMenu = false;
          }
        }
      });
    },
    // 权限
    authorityHandleCheckAllChange(val, row) {
      row.secondIsIndeterminate = true;
      row.firstIsIndeterminate = true;
      let checkedCount = val.length;
      const itemCount = checkedCount === row.authorityNodeLabel.length;
      if (itemCount) {
        row.secondIsIndeterminate = false;
        row.secondMenu = true;
      } else {
        row.secondIsIndeterminate = true;
        row.secondMenu = false;
      }
      // 循环设置相同类型的行的权限选中状态
      this.tableData.forEach((i) => {
        if (i.type === row.type) {
          i.firstIsIndeterminate = !itemCount;
          i.firstMenu = itemCount;
        }
      });
    },
    selectChange(val) {
      this.selectChange = val;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.roles {
  width: 100%;
}
.el-card {
  height: 100%;
  position: relative;
}
.add {
  position: absolute;
  bottom: 5%;
  left: 0;
  padding: 0 20px;
  width: 100%;
  ::v-deep .el-button {
    width: 100%;
  }
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  h4 {
    flex: 1;
    margin: unset;
  }
  ::v-deep .input-with-select {
    width: unset;
  }
}
::v-deep .el-tree-node.is-current.is-focusable {
  background: #e8f4ff !important;
  color: $--color-primary;
}
.danger {
  color: $--color-primary;
}
</style>
